import { withFetchData } from '@/hooks/Hoc';
import { useFetchData, usePrevious } from '@/hooks/useMyHook';
import { useTimer } from '@/hooks/useTimer';
import { PageContainer } from '@ant-design/pro-components';
import { useState } from 'react';
import Previous from './components/Previous';
import styles from './index.less';
const List = () => {
  const [count, setcount] = useState(0);
  const data = useFetchData();
  const previous = usePrevious(0);
  useTimer(() => {
    console.log('useTimer', count);
  }, 1000);
  return (
    <div>
      <h1>List组件</h1>
      {data.map((item: any) => (
        <div key={item.id}>{item.name}</div>
      ))}
      {previous.join(',')}
      <button onClick={() => setcount(count + 1)}>count+1</button>
    </div>
  );
};

const ListHoc = (props: any) => {
  return (
    <div>
      <h1>List组件</h1>
      {props.data.map((item: any) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};
const HocList = withFetchData(ListHoc);

const Hooks: React.FC = () => {
  const [show, setshow] = useState(true);
  return (
    <PageContainer ghost>
      <div className={styles.container}>
        <Previous />
        {/* <List /> */}
        {/* <HocList /> */}
        {/* <RenderPropsFetchData render={(data) => <ListHoc data={data} />} /> */}
        {show && <List />}
        <button onClick={() => setshow(!show)}>切换</button>
      </div>
    </PageContainer>
  );
};

export default Hooks;
